<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基础设置</title>
  </head>
  <body>
    <h2>event</h2>
    <script>
      const bus = new EventTarget()
      const off = registEvent([
        { target: bus, e: 'suc', handler: (e) => console.log('suc', e) },
        { target: bus, e: 'fail', handler: (e) => console.log('fail', e) }
      ])
      bus.dispatchEvent(new Event('suc'))
      bus.dispatchEvent(new Event('fail'))
      off()
      bus.dispatchEvent(new Event('suc')) // should no console
      function registEvent(eventConfigs) {
        for (const { target, e, handler } of eventConfigs) {
          target.addEventListener(e, handler)
        }
        return function unRegistEvent() {
          for (const { target, e, handler } of eventConfigs) {
            target.removeEventListener(e, handler)
          }
        }
      }
      /* 
       其他，例如
       - @vueuse : createEventHook, useEventBus
      */
    </script>
  </body>
</html>
